<!--重修酬金-->
<template>
  <div class="edu-page-warp">
    <InnerBreadcrumb v-model="indexKey" :path="breadPath" :showBack="true"/>
    <!--酬金汇总表-->
    <div v-if="indexKey == VIEW_TYPE.COLLEGELIST">
      <!-- 列表查询条件 -->
      <condition-card @reset="reset" @search="onSubmit">
        <el-form ref="queryForm" label-suffix="：" :model="queryForm" label-position="right" label-width="130px">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('label.schoolTerm')">
                <CalendarSelect v-model="queryForm.calendarId" @load-done="loadDone"></CalendarSelect>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </condition-card>
      <!--列表信息-->
      <el-card shadow="never">
        <div class="edu-page-title">{{$t('repairFee.collegeTitle')}}</div>
        <el-row style="margin-bottom:16px">
          <el-col :span="24">
            <div class="float-right">
              <el-button  @click="refreshData">{{$t('repairFee.refreshData')}}</el-button>
              <el-button type="primary" @click="handleExport(1)">{{$t('repairFee.exportFeeSummaryTable')}}</el-button>
              <el-button type="primary" @click="handleExport(2)">{{$t('repairFee.exportFeeDetailTable')}}</el-button>
            </div>
          </el-col>
        </el-row>
        <edu-table ref="tables" :data="data" :selection="true" :total="total" @page-change="pageChange" @selection-change="selectionChange" :page-size="page.pageSize_">
          <el-table-column min-width="120" :label="$t('repairFee.facultyCode')" prop="faculty" show-overflow-tooltip />
          <el-table-column min-width="120" :label="$t('repairFee.facultyName')" prop="facultyI18n" show-overflow-tooltip />
          <el-table-column min-width="120" :label="$t('repairFee.fee')" prop="fee" show-overflow-tooltip />
          <el-table-column width="80" :label="$t('message.operating')" fixed="right">
            <template slot-scope="scope">
              <div class="con_btns">
                <el-button type="text" @click="handDetail(scope.row.faculty)">{{$t('repairFee.viewDetail')}}</el-button>
              </div>
            </template>
          </el-table-column>
        </edu-table>
        <el-row style="margin-top: 20px;">
          <el-col :span="24">
            <div class="edu-page-title float-right">
              <span>{{$t('repairFee.totalAmount')}}：{{this.countFees}} 元</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!--学院酬金明细-->
    <div v-if="indexKey == VIEW_TYPE.CLASSLIST">
      <repairFeeDetail :defaultQueryParam="detailParam" @handleReturn="handleReturn"/>
    </div>
  </div>
</template>

<script>
    import examinationStudentsApi from "common/src/api/welcomeService/examinationStudents";
    import {
        repairFeeListByCollege,
        exportRepairFee,
        refreshData
    } from "common/src/api/repairFee";
    import repairFeeDetail from "./repairFeeDetail";


    import API from "common/src/api/graExamArrange/examArrangInfoQuery";

    export default {
        name: 'repairFeeQuery',
        components: {repairFeeDetail},
        data() {
            const [COLLEGELIST,CLASSLIST] = ["1", "2"];
            return {
                VIEW_TYPE: {COLLEGELIST,CLASSLIST},
                indexKey: COLLEGELIST,
                breadPath: {
                    label: this.$t("repairFee.collegeTitle"),
                    key: COLLEGELIST,
                    children: [
                        {
                            key: CLASSLIST,
                            label: this.$t("repairFee.detailTitle")
                        }
                    ]
                },
                defaultCalendarId: null,//默认学期，用于重置
                detailParam:{
                    calendarId: null, //学期
                    faculty: null //学院
                },
                data: [],
                page: {
                    pageNum_: 1,
                    pageSize_: 50
                },
                total: 0,
                queryForm: {
                    calendarId: null, //学期
                    faculty: null, //学院
                    selectFacultys: [], //勾选学院
                    type: '' //导出类型
                },
                options: {
                    colleges: [],//学院
                    whether: [],//是否
                    status: [] //状态
                },
                selectInfos: [],//列表勾选记录

            };
        },
        created() {
        },
        mounted() {
        },
        methods: {
            loadDone() {
                this.defaultCalendarId = this.queryForm.calendarId;
                this.onSubmit();
            },

            onSubmit() {  // 获取列表
                let params = {
                    ...this.page,
                    condition: this.queryForm
                };
                repairFeeListByCollege(params).then(response => {
                    if (response.code === 200) {
                        //总酬金
                        this.countFees = !response.data.countFees ? 0:response.data.countFees
                        this.data = response.data.pageResult.list;
                        this.total = response.data.pageResult.total_;
                    } else throw response.code;
                });
            },

            // 分页切换功能
            pageChange(val) {
                [this.page.pageNum_, this.page.pageSize_] = [val.pageNum, val.pageSize];
                this.onSubmit();
            },

            reset() {
                this.selectInfos = []
                Object.keys(this.queryForm).forEach(key => {
                    this.queryForm[key] = null;
                });
                this.queryForm.calendarId = this.defaultCalendarId;
                this.onSubmit();
            },

            //勾选记录
            selectionChange(val) {
                this.selectInfos = val;
            },

            refreshData() {
                this.$eduConfirm(
                    this.$t("repairFee.refreshDataTip"),
                    this.$t('repairFee.refreshData')
                ).then(() => {
                    refreshData(this.queryForm.calendarId).then(res => {
                        if (res.code === 200) {
                            this.onSubmit();
                        } else {
                            this.$message({type: "error", message: res.msg});
                        }
                    });
                });
            },

            handleReturn(){
                this.indexKey = '1';
                this.reset()
            },

            handleExport(type) {
                let loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(255, 255, 255, .48)"
                });
                let param = _.cloneDeep(this.queryForm);
                if (this.selectInfos != null && this.selectInfos.length > 0) {
                    param.selectFacultys = this.selectInfos.map(t=>t.faculty);
                }
                param.type=type
                exportRepairFee(param).then(res => {
                    if (res.code == 200) {
                        this.delayRequest(res.data.key, loading);
                    } else {
                        loading.close();
                    }
                });
            },
            async delayRequest(key, loading) {
                await new Promise(resolve => setTimeout(resolve, 5000));
                API.getObsKey(key).then(res => {
                    if (res.code == 200 && res.data.status) {
                        let path = examinationStudentsApi.exportUrl + res.data.path;
                        window.location.href = path;
                        loading.close();
                    } else {
                        this.delayRequest(key, loading);
                    }
                }).catch(ex => {
                    console.error("重修酬金"+ key +"导出失败:",ex)
                });
            },


            handDetail(faculty) {
                this.indexKey = '2';
                this.detailParam.calendarId = this.queryForm.calendarId
                this.detailParam.faculty = faculty;
            },
        }
    };
</script>
<style lang="scss" scoped>

</style>
